<template>
    <div>
        <el-table ref="el-from" :data="tableData" stripe style="width:100%" v-loading="loading">
            <!-- 多选框 -->
            <el-table-column v-if="configFlag.selection" type="selection" width="55" :align="align"></el-table-column>
            <!-- 序号列 -->
            <el-table-column v-if="configFlag.index" align="center" width="100" type="index" :index="1" :label="configFlag.indexName || '序号'" :sortable="configFlag.sortable || false"/>
            <!-- 文本 -->
            <el-table-column v-for="item in tableTitleData" :key="item.id" :label="item.label" :prop="item.prop" :sortable="item.sortable || false" :align="item.align || 'left'" :width="item.width">
                <template #default="scope">
                    <slot v-if="item.slotname" :name="item.slotname" :soltval="scope.row" />
                    <span v-else-if="item.prop">
                        {{ scope.row[item.prop] }}
                    </span>
                    <span v-else>
                        {{scope.row.value}}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div class="block pageBox" v-if="pageObj.total">
            <el-pagination @current-change="handleCurrentChange" :currentPage="pageObj.page" background layout="prev, pager, next, jumper" :total="pageObj.total" :page-size="pageObj.size">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        tableData: {
            type: Array,
            default: () => {
                return [{}];
            }
        },
        loading: {
            type: Boolean,
            default: true
        },
        configFlag: {
            type: Object,
            default: () => {
                return {
                    selection: false,
                    index: false
                };
            }
        },
        tableTitleData: {
            type: Array,
            default: () => {
                return [];
            }
        },
        pageObj: {
            type: Object,
            default: () =>{
                return {
                    total:0,
                    size:10,
                    page:1
                }
            }
        }
    },
    emits:['onchangepage'],
    setup(props,ctx) {
        const handleCurrentChange = (val) =>{
            ctx.emit('onchangepage',val);
        }
        return {
            handleCurrentChange
        };
    }
});
</script>

<style lang="scss" scoped>
    .pageBox{
        margin-top: 20px;
        text-align: center;
    }
    :deep(.el-icon){
        margin: auto;
    }
</style>
